/* 报表表格统一样式规范 */
/* 用于统一所有报表组件的表格视觉样式 */

/* ===== CSS变量定义 ===== */
:root {
  /* 表格颜色变量 */
  --table-header-bg: #f5f7fa;
  --table-header-color: #303133;
  --table-summary-bg: #fafafa;
  --table-summary-color: #303133;
  --table-border-color: #ebeef5;
  --table-stripe-bg: #fafafa;

  /* 数据高亮颜色 */
  --data-primary-color: #409eff;
  --data-success-color: #67c23a;
  --data-warning-color: #e6a23c;
  --data-danger-color: #f56c6c;
  --data-info-color: #909399;

  /* 字体大小变量 */
  --table-font-size-base: 16px;
  --table-font-size-small: 15px;
  --table-font-size-mobile: 14px;
  --table-header-font-size: 16px;

  /* 间距变量 */
  --table-cell-padding: 10px 8px;
  --table-cell-padding-small: 8px 6px;
  --table-cell-padding-mobile: 6px 4px;
}

/* ===== 报表表格基础样式 ===== */
.report-table {
  width: 100%;
  table-layout: auto;
  font-size: var(--table-font-size-base);

  /* 表头样式 - 加粗显示，统一高度 */
  .el-table__header-wrapper .el-table__header th {
    font-weight: bold !important;
    background-color: var(--table-header-bg) !important;
    color: var(--table-header-color) !important;
    font-size: var(--table-header-font-size) !important;
    padding: var(--table-cell-padding) !important;
    border-bottom: 2px solid var(--table-border-color) !important;
    height: 48px !important;
    line-height: 1.5 !important;
    vertical-align: middle !important;
  }

  /* 表体样式 - 统一高度 */
  .el-table__body-wrapper .el-table__body td {
    padding: var(--table-cell-padding-small) !important;
    font-size: var(--table-font-size-small) !important;
    height: 48px !important;
    line-height: 1.5 !important;
    vertical-align: middle !important;
  }

  /* 总计行样式 - 加粗显示，统一高度 */
  .el-table__footer-wrapper .el-table__footer td,
  .summary-row td {
    font-weight: bold !important;
    background-color: var(--table-summary-bg) !important;
    color: var(--table-summary-color) !important;
    border-top: 2px solid var(--table-border-color) !important;
    padding: var(--table-cell-padding) !important;
    height: 48px !important;
    line-height: 1.5 !important;
    vertical-align: middle !important;
  }

  /* 斑马纹样式 */
  .el-table__row--striped td {
    background-color: var(--table-stripe-bg) !important;
  }

  /* 边框样式 */
  .el-table--border {
    border: 1px solid var(--table-border-color);
  }

  .el-table--border td,
  .el-table--border th {
    border-right: 1px solid var(--table-border-color);
  }
}

/* ===== 数据高亮样式类 ===== */
.data-primary {
  color: var(--data-primary-color) !important;
  font-weight: 600 !important;
}

.data-success {
  color: var(--data-success-color) !important;
  font-weight: 600 !important;
}

.data-warning {
  color: var(--data-warning-color) !important;
  font-weight: 600 !important;
}

.data-danger {
  color: var(--data-danger-color) !important;
  font-weight: 600 !important;
}

.data-info {
  color: var(--data-info-color) !important;
  font-weight: 600 !important;
}

/* ===== 关键数据突出显示 ===== */
.highlight-data {
  color: var(--data-primary-color) !important;
  font-weight: 700 !important;
  background-color: rgba(64, 158, 255, 0.1) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
}

.highlight-total {
  color: var(--data-success-color) !important;
  font-weight: 700 !important;
  font-size: 1.1em !important;
}

/* ===== 卡片头部样式 ===== */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--table-border-color);
}

.header-left {
  display: flex;
  align-items: center;
  font-weight: 600;
  color: var(--table-header-color);
  font-size: 15px;

  i {
    margin-right: 8px;
    font-size: 16px;
    color: var(--data-primary-color);
  }
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ===== 表格容器样式 ===== */
.table-container {
  height: auto;
  overflow-x: auto;
  overflow-y: visible;
  padding: 16px;
}

/* ===== 表格对齐修复样式 ===== */
.guidance-pivot-table,
.training-pivot-table,
.campus-status-table,
.contract-statistics-table,
.service-statistics-table,
.report-table {
  /* 确保固定列与滚动列的对齐 */
  .el-table__fixed {
    .el-table__fixed-header-wrapper,
    .el-table__fixed-body-wrapper {
      .el-table__header,
      .el-table__body {
        th,
        td {
          height: 48px !important;
          line-height: 1.5 !important;
          vertical-align: middle !important;
          padding: 10px 8px !important;
        }
      }
    }
  }

  /* 修复表头分组列的对齐 - 多级表头特殊处理 */
  .el-table__header thead.is-group th {
    height: 48px !important;
    vertical-align: middle !important;
    text-align: center !important;

    .cell {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      min-height: 40px;
      padding: 8px 4px;
    }

    /* 处理跨行跨列的表头单元格 */
    &[rowspan='2'] {
      height: 96px !important; /* 两行高度 */

      @media (max-width: 1200px) {
        height: 88px !important; /* 两行高度 44px * 2 */
      }

      @media (max-width: 768px) {
        height: 80px !important; /* 两行高度 40px * 2 */
      }

      @media (max-width: 480px) {
        height: 72px !important; /* 两行高度 36px * 2 */
      }
    }

    &[colspan] {
      height: 48px !important;

      @media (max-width: 1200px) {
        height: 44px !important;
      }

      @media (max-width: 768px) {
        height: 40px !important;
      }

      @media (max-width: 480px) {
        height: 36px !important;
      }
    }
  }

  /* 确保单元格内容居中显示 */
  .el-table__body td .cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 32px;
    padding: 4px;
  }

  /* 修复固定列的高度同步问题 */
  .el-table__fixed-right,
  .el-table__fixed-left {
    .el-table__fixed-header-wrapper,
    .el-table__fixed-body-wrapper {
      overflow: visible !important;
    }

    /* 确保固定列的表头高度与主表头一致 */
    .el-table__header th {
      height: 48px !important;

      @media (max-width: 1200px) {
        height: 44px !important;
      }

      @media (max-width: 768px) {
        height: 40px !important;
      }

      @media (max-width: 480px) {
        height: 36px !important;
      }
    }

    .el-table__body td {
      height: 48px !important;

      @media (max-width: 1200px) {
        height: 44px !important;
      }

      @media (max-width: 768px) {
        height: 40px !important;
      }

      @media (max-width: 480px) {
        height: 36px !important;
      }
    }
  }

  /* 汇总行高度统一 */
  .el-table__footer-wrapper .el-table__footer td {
    height: 48px !important;
    line-height: 1.5 !important;
    vertical-align: middle !important;
    padding: 10px 8px !important;

    @media (max-width: 1200px) {
      height: 44px !important;
    }

    @media (max-width: 768px) {
      height: 40px !important;
    }

    @media (max-width: 480px) {
      height: 36px !important;
    }
  }
}

/* ===== 表格列自适应样式 ===== */
.report-table {
  /* 表格自适应布局 */
  table-layout: auto !important;
  width: 100% !important;

  /* 列宽自动调整机制 */
  .el-table__header-wrapper .el-table__header th,
  .el-table__body-wrapper .el-table__body td {
    /* 防止文本被截断 */
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;

    /* 允许列根据内容自适应 */
    min-width: auto;
    max-width: none;
  }

  /* 固定列保持固定宽度 */
  .el-table__fixed-left-patch,
  .el-table__fixed-right-patch {
    white-space: nowrap;
  }

  /* 确保表格内容完整显示 */
  .el-table__body-wrapper {
    overflow-x: visible;
  }

  /* 自适应列宽的表格单元格 */
  .auto-width-cell {
    padding: 8px 12px !important;
    min-width: fit-content;
  }
}

/* ===== 响应式设计 ===== */
@media (max-width: 1200px) {
  .report-table {
    font-size: var(--table-font-size-small);

    .el-table__header-wrapper .el-table__header th {
      font-size: var(--table-font-size-small) !important;
      padding: var(--table-cell-padding-small) !important;
      height: 44px !important;
    }

    .el-table__body-wrapper .el-table__body td {
      height: 44px !important;
    }

    .el-table__footer-wrapper .el-table__footer td {
      height: 44px !important;
    }
  }
}

@media (max-width: 768px) {
  .report-table {
    font-size: var(--table-font-size-mobile);

    .el-table__header-wrapper .el-table__header th {
      font-size: var(--table-font-size-mobile) !important;
      padding: var(--table-cell-padding-mobile) !important;
      height: 40px !important;
    }

    .el-table__body-wrapper .el-table__body td {
      font-size: 13px !important;
      padding: var(--table-cell-padding-mobile) !important;
      height: 40px !important;
    }

    .el-table__footer-wrapper .el-table__footer td {
      height: 40px !important;
    }
  }

  .header-left {
    font-size: 14px;
  }

  .table-container {
    padding: 12px;
  }
}

@media (max-width: 480px) {
  .report-table {
    font-size: 12px;

    .el-table__header-wrapper .el-table__header th {
      font-size: 12px !important;
      padding: 4px 2px !important;
      height: 36px !important;
    }

    .el-table__body-wrapper .el-table__body td {
      font-size: 11px !important;
      padding: 4px 2px !important;
      height: 36px !important;
    }

    .el-table__footer-wrapper .el-table__footer td {
      height: 36px !important;
    }
  }

  .table-container {
    padding: 8px;
  }
}

/* ===== 响应式设计增强 ===== */
@media (max-width: 1400px) {
  .header-right {
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
  }

  .validation-tip {
    margin-right: 0;
    margin-bottom: 4px;
  }

  .training-tables-container {
    flex-direction: column;
    gap: 24px;
  }

  .left-section {
    border-right: none;
    border-bottom: 1px solid #e4e7ed;
    padding-right: 0;
    padding-bottom: 16px;
  }

  .right-section {
    padding-left: 0;
    padding-top: 16px;
  }
}

@media (max-width: 1200px) {
  .header-right {
    width: 100%;
    justify-content: flex-end;
    margin-top: 8px;
  }

  .adaptive-table {
    min-width: 600px;
  }
}

@media (max-width: 768px) {
  .card-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .header-left {
    width: 100%;
    min-width: auto;
    font-size: 14px;
  }

  .header-right {
    width: 100%;
    justify-content: flex-start;
    margin-top: 8px;
  }

  .adaptive-table {
    min-width: 500px;
  }

  .region-name {
    font-size: 13px;
  }

  .normal-rate-cell {
    min-height: 40px;
    gap: 4px;
  }
  .rate-percentage {
    font-size: 13px;
  }
  .rate-note {
    font-size: 10px;
  }

  .status-icon {
    margin-right: 2px;
    font-size: 11px;
  }

  .section-title {
    font-size: 14px;
  }

  .training-table {
    font-size: 13px;
  }

  .validation-tip {
    font-size: 10px;
  }

  .training-tables-container {
    flex-direction: column;
    gap: 16px;
  }

  .left-section {
    border-right: none;
    border-bottom: 1px solid #e4e7ed;
    padding-right: 0;
    padding-bottom: 12px;
  }

  .right-section {
    padding-left: 0;
    padding-top: 12px;
  }

  .table-wrapper {
    border-radius: 6px;
  }

  .pivot-table {
    .el-table__header th,
    .el-table__body td {
      padding: 6px 4px !important;
    }
  }

  :deep(.el-tag) {
    padding: 0 6px;
    height: 22px;
    line-height: 20px;
    font-size: 12px;
  }

  :deep(.el-table) {
    font-size: 14px !important;
  }

  :deep(.el-table th) {
    font-size: 14px !important;
  }

  :deep(.el-table td) {
    font-size: 13px !important;
  }
}

/* ===== 优化表格类 ===== */
.optimized-table {
  @extend .report-table;

  /* 继承所有report-table的样式 */
  /* 可以在这里添加特定的优化样式 */
}

/* ===== 数据卡片样式 ===== */
.data-card {
  height: auto;
  min-height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid var(--table-border-color);

  .el-card__header {
    padding: 0;
  }

  .el-card__body {
    padding: 0;
  }
}

/* ===== 工具类 ===== */
.text-center {
  text-align: center !important;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.font-bold {
  font-weight: bold !important;
}

.font-normal {
  font-weight: normal !important;
}

/* ===== 表格加载状态 ===== */
.table-loading {
  .el-table__body-wrapper {
    opacity: 0.6;
  }
}

/* ===== 空数据状态 ===== */
.table-empty {
  .el-table__empty-block {
    padding: 40px 0;
    color: var(--data-info-color);
    font-size: 14px;
  }
}

/* ===== 通用表格容器和包装器样式 ===== */
.statistics-card {
  min-height: 500px;
  margin: 0 auto;
  max-width: 100%;
}

.table-wrapper {
  width: 100%;
  margin: 0 auto;
  overflow-x: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pivot-table {
  width: 100% !important;
  margin: 0;

  .el-table__header-wrapper,
  .el-table__body-wrapper {
    overflow-x: visible;
  }

  .el-table__header th,
  .el-table__body td {
    white-space: nowrap;
  }

  .el-table__fixed-right {
    right: 0 !important;
  }

  .el-table__fixed-left {
    left: 0 !important;
  }
}

/* ===== 自适应表格样式 ===== */
.adaptive-table {
  width: 100%;
  min-width: 800px;
}

/* ===== 数据行样式 ===== */
.data-row {
  margin-bottom: 16px;

  &.flex-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 24px;
  }
}

/* ===== 区域和状态单元格样式 ===== */
.region-cell {
  display: flex;
  align-items: center;
}

.region-name {
  font-weight: 500;
  font-size: 14px;
}

.status-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px 0;
}

.status-icon {
  margin-right: 4px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
}

.area-data {
  display: flex;
  justify-content: center;
}

/* ===== 进度条和比率相关样式 ===== */
.rate-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rate-text {
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}

.normal-rate-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  min-height: 48px;
  justify-content: center;

  &.rate-error {
    opacity: 0.6;
  }
}

.progress-container {
  width: 100%;
  /* 调整进度条容器最大宽度以提升可读性与显示效果 */
  max-width: 120px;
  margin: 0 auto;
}

.rate-progress {
  margin-bottom: 2px;
}

.rate-text-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.rate-percentage {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  transition: color 0.3s ease;
}

.rate-note {
  font-size: 11px;
  color: #909399;
  font-style: italic;
}
/* ===== 比率文本颜色样式 ===== */
.rate-excellent {
  color: #67c23a;
  font-weight: 700;
}

.rate-good {
  color: #95d475;
  font-weight: 600;
}

.rate-normal {
  color: #e6a23c;
  font-weight: 500;
}

.rate-poor {
  color: #f78989;
  font-weight: 500;
}

.rate-bad {
  color: #f56c6c;
  font-weight: 600;
}

.rate-invalid {
  color: #c0c4cc;
  font-weight: 400;
}

/* ===== 表格行样式 ===== */
:deep(.even-row) {
  background-color: #fafafa;
}

:deep(.odd-row) {
  background-color: #ffffff;
}

/* ===== 状态标签样式 ===== */
:deep(.el-tag) {
  transition: all 0.3s ease;
  cursor: default;
  font-weight: 500;
  border-radius: 4px;
  padding: 0 8px;
  height: 26px;
  line-height: 24px;
  font-size: 13px;

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
}

/* 不同状态标签的特殊样式 */
:deep(.el-tag--success) {
  background: linear-gradient(135deg, #67c23a, #85ce61);
}

:deep(.el-tag--primary) {
  background: linear-gradient(135deg, #409eff, #66b1ff);
}

:deep(.el-tag--warning) {
  background: linear-gradient(135deg, #e6a23c, #ebb563);
}

:deep(.el-tag--danger) {
  background: linear-gradient(135deg, #f56c6c, #f78989);
}

:deep(.el-tag--info) {
  background: linear-gradient(135deg, #909399, #a6a9ad);
}

/* 浅色效果的状态标签 */
:deep(.el-tag--success.el-tag--light) {
  background: linear-gradient(135deg, #f0f9ff, #e1f5fe);
  color: #67c23a;
  border-color: #b3e19d;
}

:deep(.el-tag--primary.el-tag--light) {
  background: linear-gradient(135deg, #ecf5ff, #d9ecff);
  color: #409eff;
  border-color: #b3d8ff;
}

:deep(.el-tag--warning.el-tag--light) {
  background: linear-gradient(135deg, #fdf6ec, #faecd8);
  color: #e6a23c;
  border-color: #f5dab1;
}

:deep(.el-tag--danger.el-tag--light) {
  background: linear-gradient(135deg, #fef0f0, #fde2e2);
  color: #f56c6c;
  border-color: #fab6b6;
}

:deep(.el-tag--info.el-tag--light) {
  background: linear-gradient(135deg, #f4f4f5, #e9e9eb);
  color: #909399;
  border-color: #c8c9cc;
}

/* ===== 培训统计特有样式 ===== */
.training-content {
  height: auto;
  min-height: auto;
}

.training-section {
  margin-bottom: 24px;
}

.section-title {
  margin: 0 0 12px 0;
  padding: 8px 12px;
  background-color: #f5f7fa;
  border-left: 4px solid #409eff;
  font-size: 15px;
  font-weight: 600;
  color: #303133;
}

.training-table {
  width: 100%;
  margin-bottom: 16px;
}

.summary-row {
  margin-top: 8px;
  margin-bottom: 16px;
}

.summary-table {
  width: 100%;
  background-color: #f8f9fa;

  :deep(.el-table__header) {
    display: none;
  }

  :deep(.el-table__body tr) {
    background-color: #f0f2f5;
    font-weight: 600;
  }
}

.training-tables-container {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  height: auto;
  min-height: auto;
}

.training-table-section {
  flex: 1;
  min-width: 0;
  height: auto;
}

.left-section {
  border-right: 1px solid #e4e7ed;
  padding-right: 16px;
}

.right-section {
  padding-left: 16px;
}

.training-group-item {
  margin-bottom: 16px;
  height: auto;
}

/* ===== 表单验证样式 ===== */
.is-error :deep(.el-input__inner) {
  border-color: #f56c6c !important;

  &:focus {
    border-color: #f56c6c !important;
    box-shadow: 0 0 0 2px rgba(245, 108, 108, 0.2) !important;
  }
}

.validation-tip {
  display: flex;
  align-items: center;
  margin-right: 8px;
  padding: 4px 8px;
  background-color: #fef0f0;
  border: 1px solid #fbc4c4;
  border-radius: 4px;
  font-size: 11px;
}

/* ===== 图表容器样式 ===== */
.chart-container {
  height: 320px;
}

.chart {
  width: 100%;
  height: 100%;
}

/* ===== 调试弹窗样式 ===== */
.debug-alert {
  width: 80%;
  max-width: 800px;

  .el-message-box__content {
    max-height: 500px;
    overflow-y: auto;
  }

  pre {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.4;
    background: #f5f5f5;
    padding: 10px;
    border-radius: 4px;
    white-space: pre-wrap;
    word-wrap: break-word;
  }
}
